.farris-notify {
  position: fixed;
  z-index: 999999;

  &.toasty-position-top-left {
    top: 0.75rem;
    left: 0.75rem;
  }

  &.toasty-position-top-right {
    top: 0.75rem;
    right: 0.75rem;
  }

  &.toasty-position-bottom-right {
    bottom: 0.75rem;
    right: 0.75rem;
  }

  &.toasty-position-bottom-left {
    bottom: 0.75rem;
    left: 0.75rem;
  }

  &.toasty-position-top-center {
    top: 0.75rem;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }

  &.toasty-position-bottom-center {
    bottom: 0.75rem;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }

  &.toasty-position-center-center {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }
}

.farris-notify,
.f-message-strip {
  .toast {
    margin: 0 0 $farris-notify-gutter;
    padding: 0;
    width: $farris-notify-toast-width;
    border: 1px solid $farris-notify-toast-type-default-border;
    background: $farris-notify-toast-type-default-bg;
    display: table;
    box-shadow: $farris-notify-toast-shadow;
    @include f-custom-border-radius($farris-notify-toast-border-radius);
    position: relative;

    .toast-close {
      position: absolute;
      border: 0;
      top: $farris-notify-toast-close-top;
      right: $farris-notify-toast-close-right;
      color: $farris-notify-toast-close-color;

      .modal_close {
        font-size: $farris-notify-toast-close-icon-size;
      }


      // bugNum:468176
      &.f-btn-icon.f-bare {
        outline: unset;
      }
    }


    // 定义大小
    .modal-tips {
      padding: $farris-notify-toast-model-inner-gutter;
    }

    .modal-tips-content {
      margin: 0 $f-temp-modal-tips-content-gutter-right 0 ($farris-modal-tips-content-gutter-right + $farris-notify-icon-size)
    }

    .modal-tips-iconwrap .f-icon {
      font-size: $farris-notify-icon-size;
      border-radius: 100%;
      vertical-align: middle;
    }

    &.toasty-type-info {
      border-color: $farris-notify-toast-type-info-border;

      .modal-tips-iconwrap .f-icon {
        box-shadow: 0px 3px 8px 0px rgba($farris-notify-toast-type-info-icon-text, 0.3);
      }
    }

    &.toasty-type-success {
      border-color: $farris-notify-toast-type-success-border;

      .modal-tips-iconwrap .f-icon {
        box-shadow: 0px 3px 8px 0px rgba($farris-notify-toast-type-success-icon-text, 0.3);
      }
    }

    &.toasty-type-danger {
      border-color: $farris-notify-toast-type-error-border;

      .modal-tips-iconwrap .f-icon {
        box-shadow: 0px 3px 8px 0px rgba($farris-notify-toast-type-error-icon-text, 0.3);
      }
    }

    &.toasty-type-warning {
      border-color: $farris-notify-toast-type-warning-border;

      .modal-tips-iconwrap .f-icon {
        box-shadow: 0px 3px 8px 0px rgba($farris-notify-toast-type-warning-icon-text, 0.3);
      }
    }
  }
}

.farris-notify {
  .toast {
    &.toasty-type-info {
      background: $farris-notify-toast-type-info-bg;
    }

    &.toasty-type-success {
      background: $farris-notify-toast-type-success-bg;
    }

    &.toasty-type-danger {
      background: $farris-notify-toast-type-error-bg;
    }

    &.toasty-type-warning {
      background: $farris-notify-toast-type-warning-bg;
    }
  }
}

/*消息条*/
.f-message-strip {
  .toast {
    width: 100%;
    box-shadow: none;

    &.toasty-type-info {
      background: $f-semantic-info-03;
    }

    &.toasty-type-success {
      background: $f-semantic-success-03;
    }

    &.toasty-type-danger {
      background: $f-semantic-danger-03;
    }

    &.toasty-type-warning {
      background: $f-semantic-warning-03;
    }

    .modal-tips {
      display: flex;
      padding: 0.5rem 1rem;
    }

    .modal-tips-content {
      margin: 0;
    }
  }
}

// 提醒按钮
.f-catch-attention-debounce {
  position: relative;
  z-index: 1;
  outline: 1px solid $farris-primary;
  animation: debounceAttention 200ms ease 0s infinite normal;
}

@keyframes debounceAttention {
  0% {
    outline: 1px solid $farris-primary;
  }

  100% {
    outline: 18px solid rgba($farris-primary, 0);
  }
}